<template>
  <div class="main-header">
    <logo class="logo"/>
    <nav-menu class="menu"/>
    <functional class="functional"/>
  </div>
</template>

<script>
import Logo from './Logo'
import Functional from './Functional'
import NavMenu from './NavMenu'
export default {
  components:{
    Logo,Functional,NavMenu
  },
  data(){
    return {}
  }
}
</script>

<style lang="less" scoped>
.main-header {
  display: -webkit-flex;
  display: flex;
  height:60px;
  line-height: 60px;
}
.logo{
  width:220px;
  flex:0 0 220px;
  justify-content:flex-start;
  background: #223F59;
  height:40px;
  margin:10px;
  border-radius: 5px;
  line-height: 40px;
  padding: 0px 10px 0px 10px;
  text-align: center;
}
.menu{
  width:100%;
}
.functional{
  width:220px;
  flex:0 0 220px;
  justify-content: flex-end;
  text-align: right;
}
</style>